<template>
  <div style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;" class="system-look">
    <div style="display: inline;" >
      <el-form :inline="true" class="demo-form-inline allboard_form">
        <el-form-item label="" class="search_select">
          <el-select clearable
            v-model="code"
            @change="getKuweiList"
            filterable placeholder="请选择">
            <el-option
              v-for="item in gzList"
              :key="item.id"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item>-->
          <!--<el-button type="primary" class="search" icon="el-icon-search" @click="getKuweiList"></el-button>-->
        <!--</el-form-item>-->
        <el-form-item class="system_board"  label="空置库位显示">
          <el-switch
            v-model="displayNoData"
            on-color="#13ce66"
            off-color="#ff4949"
            @change="updateGzDisplayData">
          </el-switch>
        </el-form-item>
        <el-form-item  style="float: right;margin-right: 0px;">
          <el-button class="bt_button" type="primary" @click="editGzDisplayHeader">表头选择</el-button>
        </el-form-item>
      </el-form>

    </div>
    <div style="text-align: center;">
      <div style="display: inline-block;font-weight: bold;line-height: 28px;font-size: 20px;margin-bottom: 4px;color: #333333;"><span style="text-align: center">SONGZ • {{boardDetail.name}}</span></div>
    </div>
    <div style="display: inline-block;float: right;font-size: 14px;">负责人：{{boardDetail.respMan}}</div>
    <wh-table :filterPage="false" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-bottom: 30px"></wh-table>
    <edit-gz-header :dataDetail="gzHeaders"></edit-gz-header>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import editGzHeader from './editGzHeader.vue';
  import { formatDate } from '@/utils/formatDate'
  import nxFullScreen from '@/components/nx-full-screen/index'
  export default {
    name:'lookboard',
    components: {whTable,nxFullScreen,editGzHeader},
    data(){
      return{
        tableData: [],
        tableHeader:[],
        tableLoading:true,
        option:{showOperate:false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        code:"",
        boardDetail:{respMan:"",name:""},
        gzList:[],

        gzHeaders:[],
        displayNoData:true
      }
    },
    mounted(){
      let self = this;
      self.getGongZhuangName();
      self.setDisplayNoData();
      self.$eventBus.$on("updateDisplayHeader",function () {
        self.setDisplayHeader();
      })
    },
    methods:{
      setDisplayNoData(){
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzDisplayData",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.displayNoData = resp.result.display !=-1?true:false;
          }
        });
      },
      updateGzDisplayData(){
        let self = this;
        let param = {display:self.displayNoData?"0":"-1"};
        self.$http({
          url: "/autoMonitor/gz/updateGzDisplayData",
          method: "post",
          params:param
        }).then(resp => {
          if (resp.success) {
            self.getKuweiList()
          }
        });
      },
      editGzDisplayHeader(){
        this.$eventBus.$emit("editGzDisHeader",this.gzHeaders);
      },
      setDisplayHeader(){
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzHeaderList",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gzHeaders = resp.result;
            let map = {};
            for(let dis of resp.result){
              map[dis.name] = dis.display;
            }
            for(let data of self.tableHeader){
              let columnName = data.columnName;
              if(map[columnName]){
                self.$set(data,"status",map[columnName]);
              }
            }
          }
        });
      },
      getGongZhuangName() {
        let self = this;
        self.$http({
          url: "/autoMonitor/gz/queryGzName",
          method: "post",
        }).then(resp => {
          if (resp.success) {
            self.gzList = resp.result;
            if(self.gzList.length > 0){
              self.code = self.gzList[0].code;
              self.getKuweiList();
            }
          }
        });
      },
      getKuweiList(){
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/position/queryLookBoardDetail",
          method: "post",
          params:{code:self.code}
        }).then(resp => {
          if (resp.success) {
            self.boardDetail = {respMan:"",name:""};
            self.tableLoading = false;
            self.tableHeader =  [{"columnName": "name", "coloumNameCn": "库位","status":"0"},
              {"columnName": "gzCode", "coloumNameCn": "工装编号","status":"0"},
              {"columnName": "carType", "coloumNameCn": "车型","status":"0"},
              {"columnName": "useStatusCn", "coloumNameCn": "库态","status":"0"},
              {"columnName": "gzStatusCn", "coloumNameCn": "状态","status":"0"}];
            self.setDisplayHeader();
            self.tableData = !self.displayNoData? resp.result.filter(item => item.gzStatus):resp.result;
            if(self.tableData.length > 0){
              let data = self.tableData[0];
              let name = data.gzName||"";
              self.boardDetail.respMan = data.respMan;
              for(let i = 0;i< name.length;i++){
                self.boardDetail.name = self.boardDetail.name+" "+name[i]
              }
            }
          }
        });
      },
    }
  }
</script>
<style scoped>
  .system-look .el-date-editor.el-input, .system-look .el-date-editor.el-input__inner {
    width: auto;
  }
  .system-look .buttonAdd{
    float: right;
    margin-bottom: 10px;
    padding: 6px 8px;
    margin-right: 5px;
    font-size: 14px;
    border-radius: 4px;
  }
  .system-look .el-input__inner{
    font-size: 11px;
  }
  .system-look .el-select__tags-text{
    font-size: 11px;
  }
  .system-look .el-select__tags{
    max-width: none !important;
  }
  .system-look .buttonAdd{
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .gzForm input{
    height: 26px !important;
    line-height: 26px !important;
  }
  .gzForm .el-form-item{
    margin-bottom: 0px !important;
  }
  .search.el-button--primary{
    background-color: #5bd39db3;
    border-color: #a5efcdb3;
  }
  .search:hover{
    color: #FFF;
    background-color: #12ba6eb3;
    border-color: #a5efcdb3;
  }
  .system-look .el-button--medium{
    padding: 5px 9px !important;
  }
  .system-look .bt_button {
    border-radius: 13px;
  }
  .add .el-button--medium{
    padding: 15px 30px !important;
  }
  .system-look .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .input_large .el-input__inner{
    padding: 0 5px;
  }
 .system-look .el-input{
   width: 86%
  }
  .system-look .el-input--medium .el-input__inner{
    height: 25px;
    line-height: 25px;
  }
  .system_board .el-form-item__content{
    line-height: 30px;
  }
</style>
